<template>
	<view class="common">

		<uni-nav-bar color="#fff" background-color="rgba(255,255,255,0)" :border="false" left-icon="left" status-bar
			title="输入核销码" @clickLeft="back" />
		<view class="main">
			<view class="search">
				<view class="flag">
					输入核销码
				</view>
				<view class="input">
					<input class="left" confirm-type="search" placeholder="111" />
					<view class="right">
						识别
					</view>
				</view>
			</view>
			<view class="container">
				<view class="part1">
					<view class="title">
						核销码
					</view>
					<view class="title">
						MC1234-5678
					</view>
				</view>
				<view class="part2">
					<view class="title">服务内容</view>
					<view class="list">
						<view class="item">
							<view class="left">
								XXX标准洗车服务包含
							</view>
						</view>
						<view class="item">
							<view class="left">
								整车泡沫冲洗擦T
							</view>
						</view>
						<view class="item">
							<view class="left">
								轮胎轮毅冲洗清洁
							</view>
						</view>
						<view class="item">
							<view class="left">
								车内吸尘
							</view>
						</view>
						<view class="item">
							<view class="left">
								内饰脚垫简单除尘
							</view>
						</view>
						<view class="item">
							<view class="left">
								(不包含虫户、水泥、沥青和顽固污溃清理等)
							</view>
						</view>
					</view>
				</view>
				<view class="part3">
					<view class="title">
						订单信息
					</view>
					<view class="item">
						<view class="left">
							订单价格:
						</view>
						<view class="right">
							￥30.00
						</view>
					</view>
					<view class="item">
						<view class="left">
							实付金额:
						</view>
						<view class="right">
							￥25.00
						</view>
					</view>
					<view class="item">
						<view class="left">
							优忠金额:
						</view>
						<view class="right">
							￥5.00
						</view>
					</view>
					<view class="item">
						<view class="left">
							订单编号
						</view>
						<view class="right">
							2020032554565799
						</view>

					</view>
					<view class="item">
						<view class="left">
							支付时间
						</view>
						<view class="right">
							2020.03.30 14:40:45
						</view>
					</view>
					<view class="item">
						<view class="left">
							预约时间
						</view>
						<view class="right">
							2020.03.30 14:40
						</view>
					</view>
				</view>
			</view>

			<view class="part5">
				<!-- 	<uni-popup ref="inputDialog" type="dialog">
									<uni-popup-dialog ref="inputClose" mode="base" title="输入内容" value="124" placeholder="请输入内容"
										@confirm="dialogInputConfirm"></uni-popup-dialog>
								</uni-popup> -->

				<uni-popup ref="inputDialog" type="dialog">
					<!-- uni-popup-dialog 组件，使用默认插槽 -->
					<uni-popup-dialog ref="inputClose" mode="base" title="核销此订单" @confirm="dialogInputConfirm">
						<!-- 默认插槽，添加自定义输入框 -->
						<template #default>

							<view class="dialogcontent">
								请仔细核对订单，此操作不可撤销请谨慎操作
							</view>
						</template>
					</uni-popup-dialog>
				</uni-popup>
				<button class="button" type="primary" @click="inputDialogToggle"
					:class="{ 'verified': isVerificat, '':!isVerificat }"><text class="button-text">确认核销</text></button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

				isVerificat: false
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			concel() {
				uni.showToast({
					title: `取消成功`
				});
			},
			inputDialogToggle() {

				if (this.isVerificat) {
					uni.showToast({
						title: '已核销过，请勿重复核销'
					});
					return;
				}
				this.$refs.inputDialog.open("center")
			},
			dialogInputConfirm(val) {
				uni.showToast({
					title: '点击了确认'
				})
				this.isVerificat = true;

				console.log(this.isVerificat);
				setTimeout(() => {
					// uni.hideLoading()
					// console.log(val)

					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 3000)

			}

		}
	}
</script>

<style scoped>
	.search {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		display: flex;
		align-items: center;
		column-gap: 10rpx;
	}

	.search>.flag {
		color: #669af2;
	}

	.search>.input {
		display: flex;
		align-items: center;
		flex: 1;
		border: 5rpx solid #eee;
		border-radius: 40rpx;
		padding-right: 5rpx;
	}

	.search>.input>.left {
		/* 	border: 5rpx solid #eee; */
		flex: 1;
		height: 70rpx;
	}

	.search>.input>.right {
		/* 	border: 5rpx solid #eee; */
		background-color: #2e80f9;
		padding: 10rpx 35rpx;
		border-radius: 30rpx;
		color: #fff;
	}
	.part1 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		row-gap: 10rpx;
	}



	.title {
		padding-left: 0rpx;
		line-height: 72rpx;
		height: 72rpx;
		font-weight: bold;
		font-size: 35rpx;
		padding: 5rpx 0rpx;
		/* border-bottom: 8rpx solid #eee; */
	}


	/* 列表区 */
	.part2,
	.part3 {
		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
	}

	.list {

		display: flex;
		flex-direction: column;
		row-gap: 10rpx;
	}

	.item {
		display: flex;
		/* justify-content: space-between; */
		justify-content: flex-start;
		align-items: center;
		column-gap: 10rpx;
	}

	.item>.left {

		color: #6d6d6d;
	}

	.item>.right {

		color: #bababa;
	}

	.item image {
		width: 150rpx;
		height: 150rpx;
	}

	.buwei {
		display: flex;
		column-gap: 10rpx;
		flex-direction: row;
		justify-content: flex-start;
	}

	.part4 {
		display: flex;
		justify-content: flex-end;
		border-radius: 0rpx;
		position: fixed;
		width: 750rpx;
		bottom: 0rpx;
		right: 5rpx;
		padding: 20rpx 25rpx;
		background-color: #fff;
		border-top: 4rpx solid #eee;
	}

	.part4>view {
		background: linear-gradient(to right, #3789ff, #0662e6);

		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		color: #fff;
	}

	.part5 {
		background-color: transparent !important;
	}

	.part1,
	.part2 {
		/* border-bottom: ; */
		border-bottom: 8rpx solid #eee;
	}

	.part1,
	.part2,
	.part3 {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.dialogcontent {
		text-align: center;
	}

	::v-deep .uni-dialog-button-group {
		border: none;
	}

	::v-deep .uni-dialog-button {
		border: none;

	}

	.common>.main>.blank {
		border-radius: 0rpx;
		height: 0rpx;
		background-color: transparent;

	}

	::v-deep .uni-dialog-title-text {
		color: #000;
	}

	.verified {
		background-color: #bababa !important;
	}

	.button {
		border-radius: 30rpx;
		background-color: #007aff;
	}

	/* #ifdef MP */

	.search {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
	}

	.search>.flag {
		font-size: 26rpx;
	}

	.container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
	}

	.part1,
	.part2,
	.part3 {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.title {
		font-size: 30rpx;
	}

	.item {
		font-size: 25rpx;
	}

	.part5 {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.button {
		border-radius: 30rpx;
	}

	/* #endif */
</style>